<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>user media</title>
</head>

<body onload="init()">

<section id="app" hidden>
	<video id="show" autoplay></video>
</section>


<style>
#css {
	display:none;
}
#cssText {
	width:300px;
	height:140px;
	font-size:12px;
	line-height:1.5;
	font-family:verdana;
	padding:5px;
}	
</style>
<div id="css">
	<textarea id="cssText">border:5px solid #cd0000;
width:180px;
height:180px;
right:1em;
top:1em;
position:fixed;
opacity:0.8;</textarea> <br>
<input type="button" value="应用 CSS" id="cssApply">
</div>

<script>
function init(){
	var video = document.getElementById("show");
	var app = document.getElementById("app");
	var cssPanel = document.getElementById("css");
	var cssApply = document.getElementById("cssApply");
	var cssRules = document.getElementById("cssText");

	cssApply.onclick = function(){
		video.style.cssText = cssRules.value;
	}

	if (navigator.webkitGetUserMedia) {
		navigator.webkitGetUserMedia({audio:true, video:true},gotStream,function(){});
	}
	function gotStream(stream) {
		video.src = webkitURL.createObjectURL(stream);
		cssPanel.style.display = "block";
		app.hidden = false;
	}

	if (navigator.mozGetUserMedia) {
		navigator.mozGetUserMedia({audio:true, video:true}, gotStream2,function(){});
	}
	function gotStream2(stream) {
		video.src = URL.createObjectURL(stream);
		cssPanel.style.display = "block";
		app.hidden = false;
	}
}

/*
指定设备：MediaStreamTrack.getSources()
*/


// pc1 = new webkitRTCPeerConnection(servers);
// // ...
// pc1.addStream(localstream); 


// pc1.createOffer(gotDescription1);
// //...
// function gotDescription1(desc){
//   pc1.setLocalDescription(desc);
//   trace("Offer from pc1 \n" + desc.sdp);
//   pc2.setRemoteDescription(desc);
//   pc2.createAnswer(gotDescription2);
// }


// pc2 = new webkitRTCPeerConnection(servers);
// pc2.onaddstream = gotRemoteStream;
// //...
// function gotRemoteStream(e){
//   vid2.src = URL.createObjectURL(e.stream);
// }
</script>
</body>
</html>
